import React, { Component } from 'react';
import {
    Modal,
    Toast,
    Flex,
    Button,
    Checkbox,
    List,
    Icon,
    Stepper,
    SwipeAction,
    WingBlank
} from 'antd-mobile';
import Img from '../../components/Img/Img';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import { routerRedux } from 'dva/router';
import CanChangeScroll from '../../components/CanChangeScroll/CanChangeScroll';
//import CartStepper from './cartStepper';
//import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import { isToken } from '../../utils/judgmentEquipment';

import { cartGoods, gift_list, no_store_img, spec_model, select_goods } from './cartGoods.less';

const Item = List.Item;
const AgreeItem = Checkbox.AgreeItem;
//import CouponItem from '../../components/CouponItem/CouponItem';

class CartGoods extends Component {
    constructor(props) {
        super(props);
        this.state = {
            specShow: false,
            specList: [],

            goodesNum: 1,
        }
        this.specId = "";
        this.price="";
    }

    // 选择购物车
    checkGoods = (cartId, isCheck, e) => {
        //this.props.checkGoods(store, goods, e.target.checked);
        const { goodsIndex, shopIndex } = this.props;
        this.props.dispatch({ type: 'cart/checkCartEFF', goodsIndex, shopIndex, isCheck, obj:{ id:cartId }});
    }

    gotoGoodsDetail= (goods) => {
        this.props.dispatch(routerRedux.push(`/goodsDetail/${goods.specId}`));
    }

    confirm = () => {
        this.props.dispatch({type: 'cart/putSpecIdEFF', obj: {cartId: this.props.goods.cartId, specId: this.specId}}).then(res => {
            console.warn("putSpecIdEFF 数据。。。");
            this.setState({specShow: false});
            // 更新购物车列表。。。
            this.props.dispatch({type: 'cart/cartListEFF'});
        });
    }

    changeSpecId = (specId, name, list) => {
        var strList = [];
        list.forEach(v => v.name == name || v.specName.forEach(vv => vv.isDefault == -1 || strList.push(vv.spValueId)));


        console.warn(strList, "strList");
        this.props.dispatch({type: 'cart/getSpecIdEFF', obj: {goodsId: this.props.goods.goodsId, specIds: [specId, ...strList].join(',')}}).then(res => {
            console.log(res,"goodsInfo.....");
            this.setState({goodsNum: +res.ret.num});
            this.specId = res.ret.specId;
            this.onClick(res.ret.specId,res.ret.price);
        });
    }
    onClick = (specId,price) => {
        this.props.dispatch({type: 'cart/getCartSpecEFF', obj: {specId}}).then(res => {
            this.price=price;
            if (res.code == 200) this.setState({specShow: true, specList: res.ret.cartSpec});
        });

    }

    render() {
       // const { left } = this.state;
        const { goods, goodsIndex, shopIndex, index, dispatch, editStatus, editShow ,idx} = this.props;

        return (
                <Item>
                    <Flex className={cartGoods} direction="row">
                        <SwipeAction
                            style={{ backgroundColor: 'transparent', width:"100%" }}
                            autoClose
                            right={[
                                {
                                    text: goods.isFav==0?<div>移入<br/>收藏</div>:<div>已收藏</div>,
                                    onPress: () => {
                                        if(goods.isFav==0){
                                            dispatch({ type: 'cart/favgoodsOneEFF',obj:{favType:1, goodsId:goods.goodsId}});
                                        }
                                    },
                                    style: goods.isFav==0?{ backgroundColor: '#ff9402', color: 'white', width: '1.2rem' }:{ backgroundColor: '#e5e5e5', color: '#bcbcbc', width: '1.2rem' },
                                },
                                {
                                    text: '删除',
                                    onPress: () => {

                                        dispatch({ type: 'cart/deleteCartEFF', shopIndex, goodsIndex, obj: {cartId: goods.cartId}});
                                    },
                                    style: { backgroundColor: '#ff0036', color: 'white', width: '1.2rem' },
                                },
                            ]}
                            //onOpen={() => console.log('global open')}
                            //onClose={() => console.log('global close')}
                        >
                            <Flex
                                className="right_tF"
                            >
                                <Checkbox checked={ goods.isCheck==1 ? true : false } disabled={goods.goodsNowStorage == 0 || goods.goodsShow != 1} onChange={e => this.checkGoods(goods.cartId, goods.isCheck==1 ? 0 : 1, e)} />
                                <div onClick={() => this.gotoGoodsDetail(goods)}  className="img_box">
                                    <Img className={ goods.goodsNowStorage == 0 || goods.goodsShow != 1 ? no_store_img : "" } src={goods.goodsImages} style={{ maxHeight: '2rem', width: '100%', height:"100%" }} />
                                    {
                                        goods.serial == 0 || goods.goodsShow != 1 ? <div className="no_store"></div> : ""
                                    }
                                </div>
                                <Flex.Item style={{ marginLeft:'0rem', marginRight:".3rem" }}>
                                    <Flex direction="column" justify="between" style={{ height:"2rem" }}>
                                        <div className="goodsName text-two-eli"
                                             style={ goods.goodsNowStorage == 0 || goods.goodsShow !=1 ? { color:"#999" } : {}}
                                             onClick={() => this.gotoGoodsDetail(goods)}
                                        >
                                            {goods.goodsName}
                                        </div>
                                        <Flex justify="between" className="specInfo">
                                            {
                                                editStatus ?
                                                <div
                                                    className="text-overflow-hidden"
                                                   // onClick={() => gotoGoodsDetail(goods)}
                                                    style={{padding: '.05rem .1rem', borderRadius: '.05rem'}}
                                                    dangerouslySetInnerHTML={{ __html: goods.specInfo }}
                                                /> :
                                                <div
                                                    className="text-overflow-hidden"
                                                    className={ select_goods }
                                                    onClick={() =>{this.onClick(goods.specId,goods.goodsPrice)}}
                                                   // onClick={() => gotoGoodsDetail(goods)}
                                                   //  style={ editStatus==false ? { backgroundColor:'#e7e7e7' }: {}  }
                                                    // dangerouslySetInnerHTML={{ __html: goods.specInfo }}
                                                ><span dangerouslySetInnerHTML={{ __html: goods.specInfo }}></span>{goods.specInfo==""?"":<Icon style={{transform: 'translateY(.08rem)'}} size='xxs' type={ "down" }/>}</div>
                                            }
                                            {/*{ editStatus==false ? <Icon type="down"  />: "" }*/}
                                        </Flex>

                                        <Flex justify="between"  style={{ width:"100%" }}>
                                            {
                                                goods.goodsNowStorage == 0||goods.goodsShow !=1 ?
                                                    <div style={{ fontSize:"0.22rem", color:"#666" }}>
                                                        {
                                                            goods.goodsNowStorage == 0 ? "宝贝已经卖光了":"宝贝已经下架"

                                                        }
                                                    </div>
                                                       :
                                                    <div style={{ color: 'red' }}>￥{goods.goodsPrice}</div>
                                            }




                                            {
                                                goods.goodsNowStorage == 0||goods.goodsShow !=1 ?
                                                    <div className={ goods.goodsNowStorage == 0 ? "noStorage":"noGoods" }>
                                                        查看相似
                                                    </div>
                                                    :
                                                    <Stepper
                                                        style={{ width: "2rem", padding:"0rem" }}
                                                        showNumber
                                                        min={1}
                                                        max={ goods.maxBuyNum=="" || goods.maxBuyNum < goods.goodsNowStorage ? goods.goodsNowStorage : goods.maxBuyNum }
                                                        value={goods.goodsNum}
                                                        onChange={(val)=>{
                                                            console.warn(val, "cartGoods BUG--->>>   已更改原生ant组件。。。node_modules\rmc-input-number\es   中的P238~P240已被注释。。。");
                                                            dispatch({ type:"cart/changeCartNumEFF", shopIndex, goodsIndex, obj: { id:goods.cartId, count:val } })
                                                        }}
                                                    />
                                            }

                                        </Flex>
                                    </Flex>

                                </Flex.Item>
                            </Flex>
                        </SwipeAction>

                    </Flex>
                   <div className={gift_list}>
                       {
                           goods.giftlist.map((v,i,a)=>{

                               return (
                                   <Flex className="gift_item" justify="between" key={i}>
                                       <div className="text-overflow-hidden">
                                           <span className="name">[赠品]</span>
                                           {v.sourceName }
                                       </div>
                                       <div>x{v.couponSourceNum }</div>
                                   </Flex>
                                   )
                           })
                       }
                   </div>
                   <Modal
                       popup
                       visible={this.state.specShow}
                       animationType="slide-up"
                       maskClosable={true}
                       className={spec_model}
                       onClose={() => { this.setState({ specShow: false }); }}
                       closable={true}
                   >
                       <div className="sepc_title">
                           <div className="goods_img">
                               <NoLazyImg src={goods.goodsImages} style={{ width:"100%", height:"100%", maxHeight:'1.6rem' }} />
                           </div>
                           <div style={{ color:"#ff0036" }}>￥{this.price}</div>
                           {/* <div>商品编号：{specGoodsSerial}</div> */}
                           { !this.state.goodesNum && <div>此商品暂无库存</div> }
                       </div>

                       <CanChangeScroll wrapperId="goodsDetailWraperId" targetId="goodsDetailTargetId" className="spec_scroll">
                           <div className="sp_list">
                               {
                                   this.state.specList.map((v,i,a)=>{

                                       return (
                                           <div key={i}>
                                               <div className="spec_name">{v.name}</div>
                                               <Flex wrap="wrap">
                                                   {
                                                       v.specName.map((vv,ii,aa)=>{
                                                           console.warn(vv, "shuju ....");
                                                           return (
                                                               <div onClick={() => this.changeSpecId(vv.spValueId, v.name, this.state.specList)}
                                                                    style={ vv.isDefault != -1 ? { backgroundColor:"#ff0036", color:"#fff" } :{} }
                                                                    className="item" key={ii}
                                                               >
                                                                   { vv.spValueName }
                                                               </div>
                                                           )
                                                       })
                                                   }
                                               </Flex>
                                           </div>
                                       )
                                   })
                               }
                           </div>

                       </CanChangeScroll>

                       <Button
                           style={{marginTop: '1rem'}}
                           disabled={!this.state.goodesNum}
                           onClick={this.confirm}
                           type="primary">
                           确定
                       </Button>

                   </Modal>
                    {idx.length>goodsIndex+1?<WingBlank>
                        <div style={{height:"0",border:".5px solid #e5e5e5",width:"60%",float:"right",marginTop:".2rem"}}></div>
                    </WingBlank>:""}
                </Item>
        )

    }
}

export default CartGoods;
